<!--
 * @Author: fisher
 * @Date: 2023-08-01 18:00:48
 * @LastEditTime: 2024-01-18 17:14:23
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \front-end-template\src\modules\DataManage\templates\components\templateDialog.vue
-->
<template>
  <div class="mask">
    <div class="content">
      <div class="header">
        <span>新增模板</span>
        <img
          src="@/assets/img/dataManagement/close.webp"
          alt="close"
          @click="close"
        />
      </div>
      <div class="form">
        <div class="form_item">
          <span>
            <strong style="color: red">*</strong>
            类型：
          </span>
          <input
            v-if="isInWarehouse"
            v-model="warehouseName"
            placeholder="请输入仓库名称"
            type="text"
            disabled
            style="cursor: not-allowed; background: #f5f5f5"
          />
          <fks-select
            v-if="!isInWarehouse"
            v-model="warehouseId"
            placeholder="请选择"
            style="width: 245px"
            @change="warehouseChange"
          >
            <fks-option
              v-for="item in warehouseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </fks-option>
          </fks-select>
        </div>
        <div class="form_item">
          <span> <strong style="color: red">*</strong> 模板名称：</span>
          <input
            v-model="templateName"
            placeholder="请输入模板名称"
            type="text"
          />
        </div>
        <div class="form_item">
          <span> <strong style="color: red">*</strong> 选择文件：</span>
          <fks-upload
            class="upload-area"
            :class="{ upload_done: fileList.length }"
            :file-list="fileList"
            action=""
            accept=".fmw"
            drag
            :limit="1"
            :headers="{
              'Fawkes-Auth': ACESS_TOKEN,
            }"
            :with-credentials="true"
            :http-request="uploadFmw"
            :on-success="uploadFmwSuccess"
          >
            <img
              src="@/assets/img/dataManagement/file_upload.webp"
              alt="file_upload"
            />
            <div class="fks-upload__text">点击或将文件拖拽到这里上传</div>
          </fks-upload>
        </div>
        <div class="form_item">
          <span> 模板介绍：</span>
          <fks-input
            type="textarea"
            rows="4"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入模板介绍"
            v-model="templateInfo"
            style="width: 245px; height: 100px"
          >
          </fks-input>
        </div>
        <div class="form_submit">
          <div class="btn" @click="cancel">取消</div>
          <div class="btn btn_prime" @click="submit">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadTemplate, addTemplate } from "../api.js";
import { uploadFile } from "@/api/file.js";
export default {
  props: {
    warehouseData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {},
  data() {
    return {
      uploadUrl: this.VUE_APP_UPLOAD_API,
      warehouseOptions: [],
      warehouseName: "",
      warehouseId: "",
      templateName: "",
      templateInfo: "",
      fileList: [],
      fileToken: "",
      ACESS_TOKEN: this.$storage.get("access_token"),
      isInWarehouse: false,
    };
  },
  computed: {},
  mounted() {
    if (JSON.stringify(this.warehouseData) == "{}") {
      // 初始化选择仓库列表
      this.isInWarehouse = false;
      const data = this.$parent.tableData;
      data.forEach((item) => {
        this.warehouseOptions.push({
          label: item.warehouseName,
          value: item.id,
        });
      });
    } else {
      this.isInWarehouse = true;
      // 初始化赋值
      this.warehouseName = this.warehouseData.warehouseName;
      this.warehouseId = this.warehouseData.id;
    }
  },
  destroyed() {},
  methods: {
    warehouseChange(val) {
      const target = this.$parent.tableData.find((item) => item.id == val);
      this.warehouseName = target.warehouseName;
      this.warehouseId = target.id;
    },
    async uploadFmw(data) {
      const file = new FormData();
      file.append("file", data.file);
      const res = await uploadTemplate(file);
      if (res.status) {
        this.fileToken = res.data;
      } else {
        this.fileToken = "";
      }
    },
    uploadFmwSuccess(res, file, fileList) {
      this.fileList = [...fileList];
      this.templateName = this.fileList[0].name;
    },
    handleFormData() {
      const data = {};
      data.path = this.fileToken;
      data.warehouseName = this.warehouseName;
      data.warehouseId = this.warehouseId;
      data.templateName = this.templateName;
      data.activated = 0;
      return data;
    },
    submit() {
      const data = this.handleFormData();
      console.log("data", data);
      if (data.path) {
        addTemplate(data)
          .then((res) => {
            console.log("res", res);
            if (res.status) {
              if (!this.isInWarehouse) {
                this.$notify({
                  title: "提示",
                  message: "模板已添加至对应仓库，请选择仓库查看！",
                  type: "success",
                });
              }
              this.$message({
                message: "添加成功！",
                type: "success",
              });
            }
          })
          .catch((err) => {
            throw new Error(err);
          })
          .finally(() => {
            this.$parent.getData();
            this.close();
          });
      } else {
        this.$notify({
          title: "警告",
          message: "模板文件不能为空！",
          type: "warning",
        });
        return;
      }
    },
    cancel() {
      this.close();
    },
    close() {
      this.$parent.templateVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  background: rgba($color: #00152a, $alpha: 0.5);
  .content {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 430px;
    height: 490px;
    background: #fff;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03),
      0px 9px 28px 0px rgba(0, 0, 0, 0.05),
      0px 6px 16px -8px rgba(0, 0, 0, 0.08);
    .header {
      height: 40px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 24px 0 24px;
      span {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(0, 0, 0, 0.85);
        flex: 1;
      }
      img {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
    .form {
      margin-top: 4px;
      padding: 0 50px;
      &_item {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-top: 20px;
        span {
          width: 100px;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          color: rgba(0, 0, 0, 0.85);
          margin-top: 8px;
          text-align: right;
        }
        input {
          width: 245px;
          border: 1px solid #cbd5dd;
          outline: none;
          border-radius: 5px;
          font-size: 14px;
        }
        input {
          height: 36px;
          padding: 0 10px;
        }

        input::-webkit-input-placeholder {
          // 这里写placeholder的样式
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.25);
        }
        .upload-area {
          width: 245px;
          height: 100px;
          ::v-deep .fks-upload {
            width: 100%;
            height: 100%;
          }
          ::v-deep .fks-upload-dragger {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 12px;
            img {
              width: 30px;
              height: 30px;
            }
          }
        }
        .upload_done {
          ::v-deep .fks-upload {
            width: 100%;
            height: 0;
            overflow: hidden;
            // display: flex;
            // flex-direction: column;
            // justify-content: center;
            // align-items: center;
            // gap: 12px;
            // img{
            //     width: 30px;
            //     height: 30px;
            // }
          }
        }
      }
      &_submit {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        .btn {
          width: 68px;
          height: 36px;
          background: #fff;
          border-radius: 2px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #262626;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #cbd5dd;
          cursor: pointer;
          // 当前页面特殊间距
        }
        .btn:hover {
          opacity: 0.85;
          box-shadow: 0 0 3px 0px #ddd;
        }
        .btn_prime {
          background: #3f9eff;
          color: #fff;
        }
      }
    }
  }
}
</style>
